<!-- 视频监控 -->
<template>
  <div class="ov-h monitor-container plr15">
    <div class="flex h100">
      <LeafTree
        :data="treeData"
        class="nav-tree" />
      <div class="relative h100 w100">
        <PagerTable
          :table-data="tableData"
          :table-pager="tablePager"
          @current-page-change="handlePageChange"
        >
          <el-table-column
            label="操作"
            width="180">
            <template #default="scope">
              <el-button
                v-blur
                size="small"
                type="primary"
                :icon="VideoCamera"
                @click="() => handleLook(scope.row)"
              >
                查看监控
              </el-button>
            </template>
          </el-table-column>
        </PagerTable>
      </div>
    </div>
    <el-dialog
      :model-value="dialogVisible"
      width="80%"
      append-to-body
      close-on-click-modal
      close-on-press-escape
      align-center
      @close="handleClose"
    >
      <span>This is a message</span>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import LeafTree from '@/components/LeafTree/index.vue'
import PagerTable from '@/components/PagerTable/index.vue'
import { VideoCamera } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import type { ITree } from '@/types/tree'
import type { ITable, IPager } from '@/types/table'
const treeData = reactive<ITree[]>([
  {
    label: '公司',
    id: '123',
    type: '1',
    children: [
      {
        label: '站点',
        type: '2',
        children: [
          {
            label: '电站',
            type: '3',
            children: [
              {
                label: '分组',
                type: '4',
                children: [{ label: '设备', type: '5', children: [] }]
              }
            ]
          }
        ]
      }
    ]
  }
])
const tableData = reactive<ITable>({
  data: [
    {
      name: 'name',
      no: '1',
      firm: 'jst',
      address: '海南'
    },
    {
      name: 'name',
      no: '1',
      firm: 'jst',
      address: '海南'
    },
    {
      name: 'name',
      no: '1',
      firm: 'jst',
      address: '海南'
    },
    {
      name: 'name',
      no: '1',
      firm: 'jst',
      address: '海南'
    }
  ],
  cols: [
    {
      label: '摄像头名称',
      prop: 'name'
    },
    {
      label: '摄像头编号',
      prop: 'no'
    },
    {
      label: '摄像头厂商',
      prop: 'firm'
    },
    {
      label: '安装地址',
      prop: 'address'
    }
  ]
})
const tablePager = reactive<IPager>({
  total: 400,
  currentPage: 1
})
const handlePageChange = (pageNum: number) => {
  tablePager.currentPage = pageNum
  console.log('pageNum:', pageNum)
}
const dialogVisible = ref(false)
// 查看监控
const handleLook = (row: any) => {
  console.log('row:', row)
  dialogVisible.value = true
}
// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
$color: #fff;
$primary_color: #29f1fa;
$bg: #092133;
.monitor-container {
  background-color: $bg;
  height: calc(100vh - 6.9rem);
  width: 100%;
  box-sizing: border-box;
}
.nav-tree {
  width: 20rem;
  background: rgba(8, 36, 55, 0.70);
  height: 100%;
}
.main {
  flex: 1;
  background: rgba(8, 36, 55, 0.70);
  height: 100%;
}
</style>
